<template>
  <div class="videoPlayer">
    <video ref="videoPlayer" class="video-js vjs-default-skin" width="100%" height="100%" controls></video>
  </div>
</template>

<script>
import flvjs from 'flv.js'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'flv.js/dist/flv.js'

export default {
  props: {
    videoUrl: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      defaultVideoUrl: 'default_video_url'
    };
  },
  mounted() {
    // 获取视频元素
    const videoElement = this.$refs.videoPlayer

    // 创建 FLV 播放器
    if (flvjs.isSupported()) {
      const flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: this.videoUrl || this.defaultVideoUrl
      })

      // 创建 Video.js 播放器
      const player = videojs(videoElement, {
        techOrder: ['html5', 'flvjs'],
        controls: true
      })

      // 将 FLV 播放器添加到 Video.js 播放器中
      player.src({
        src: this.videoUrl || this.defaultVideoUrl,
        type: 'video/flv'
      })

      // 监听 Video.js 播放器的销毁事件，在组件销毁前销毁 FLV 播放器
      player.on('dispose', () => {
        flvPlayer.unload()
        flvPlayer.detachMediaElement()
        flvPlayer.destroy()
      })

      // 初始化 FLV 播放器
      flvPlayer.attachMediaElement(videoElement)
      flvPlayer.load()
      flvPlayer.play()
    }
  }
}
</script>

<style scoped>
.videoPlayer {
  width: 100%;
  height: 100%;
}

/* 在这里添加你的样式，以适应你的页面布局 */
</style>


<style>
.video-js {
  width: 100% !important;
  height: 100% !important;
}
</style>